/**
 * Created by hejg on 2018/5/7.
 */
import React, {Component} from 'react';
import {
    ScrollView,
    View,
    StyleSheet,
    Text,
    TouchableOpacity,
} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import ListIcon from 'react-native-vector-icons/Entypo';
import Style from '../../../../components/Style';
import Tool from '../../../../components/Tool';
import Echarts from 'native-echarts';
import ChoseIcon from 'react-native-vector-icons/FontAwesome';
export default class Examination extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View>
                <View style={styles.timeView}>
                    <Text style={{color:Style.color.blue,margin:10}}>诊断时间2018年1月~4月</Text>
                </View>
                <View style={styles.reductView}>
                    <Text style={styles.reductTitle}>诊断报告</Text>
                    <RedoctItem/>
                </View>
                <ScrollView>
                    <ListItem/>
                    <ListItem/>
                </ScrollView>
            </View>
        );
    }
}

class RedoctItem extends Component{
    render(){
        return(
            <View style={{flexDirection:'row'}}>
                <View style={styles.radius}/>
                <Text style={{color:Style.color.lightRed}}>通信收入份额</Text>
                <Text style={{color:Style.color.black}}>排名靠后,低于全省均值</Text>
                <Text style={{color:Style.color.lightRed}}>14pp</Text>
            </View>
        )
    }
}
class ListItem extends Component{
    constructor(props){
        super(props);
        this.state={
            visiable:false
        }
    }
    _change(visiable){
        this.setState({
            visiable:visiable?false:true
        });
    }
    render(){
        return(
            <View>
                <View style={styles.listView}>
                    <View style={{flexDirection:'row',flex:1,alignItems:'center'}}>
                            <Text style={{color:Style.color.black,fontSize:Style.fontSize.normal}}>整体收入</Text>
                    </View>
                    <TouchableOpacity
                        onPress={()=>this._change(this.state.visiable)}
                        style={{justifyContent:'center'}}>
                            <ChoseIcon name={'angle-down'} size={20} color={Style.color.gray}/>
                    </TouchableOpacity>
                </View>
                {
                    this.state.visiable?
                        <View>
                            <ListNextItem name={'通信和通信华收入'}/>
                        </View>
                        :null
                }
            </View>
        )
    }
}
class ListNextItem extends Component{
    constructor(props){
        super(props);
        this.state={
            visiable:false
        }
    }
    _change(visiable){
        this.setState({
            visiable:visiable?false:true
        });
    }
    render(){
        const seriesLabel = {
            normal: {
                show: true,
                textBorderColor: '#333',
                textBorderWidth: 2
            }
        }
        const option = {
            legend: {
                data: ['移动', '电信', '联通']
            },
            grid: {
                left:'15%',
                top:'15%',
                bottom:'15%',
                right:'15%'
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            yAxis: {
                type: 'category',
                inverse: true,
                data: ['2018', '2017'],

            },
            series: [
                {
                    name: '移动',
                    type: 'bar',
                    label: seriesLabel,
                    data: [165, 170],
                    itemStyle:{
                        normal:{
                            color:'#558ed5'
                        }
                    },
                },
                {
                    name: '电信',
                    type: 'bar',
                    label: seriesLabel,
                    data: [150, 105],
                    itemStyle:{
                        normal:{
                            color:'#4bacc6'
                        }
                    },
                },
                {
                    name: '联通',
                    type: 'bar',
                    label: seriesLabel,
                    itemStyle:{
                        normal:{
                            color:'#c0504d'
                        }
                    },
                    data: [220, 82],
                }
            ]
        };
        return(
            <View>
                <View style={styles.listNextView}>
                    <View style={{flexDirection:'column',flex:1,justifyContent:'space-between'}}>
                        <Text style={styles.kpiTitle}>{this.props.name}</Text>
                        <View style={{flexDirection:'row'}}>
                            <Text>到达值:</Text>
                            <Text style={{color:Style.color.blue}}>41425</Text>
                        </View>
                    </View>
                    <View style={{flexDirection:'column', alignItems:'flex-end'}}>
                        <Text>2018年1月~4月</Text>
                        <Text>1名</Text>
                    </View>
                    <TouchableOpacity
                        onPress={()=>this._change(this.state.visiable)}
                        style={{justifyContent:'center', alignItems:'flex-end'}}>
                        <ListIcon name={'dots-three-vertical'} size={20} color={Style.color.black}/>
                    </TouchableOpacity>
                </View>
                {
                    this.state.visiable?
                        <View>
                            <Echarts option={option} height={200} width={Style.css.width}/>
                        </View>
                        :null
                }
            </View>
        )
    }
}
const styles = StyleSheet.create({
    timeView:{
        backgroundColor:Style.color.white,marginBottom:10,height:80
    },
    reductView:{
            flexDirection:'column', backgroundColor:'#d9d9d9',width:Style.css.width-20,
        alignSelf:'center',borderRadius:15,height:100,marginTop:-45

    },
    reductTitle:{
    fontSize:Style.fontSize.large,paddingLeft:20,color:Style.color.black
    },
    radius:{
        width:5,height:5,borderRadius:50,backgroundColor:Style.color.lightRed,marginLeft:15,marginRight:15,
        alignSelf:'center'
    },
    listView:{flexDirection:'row',height:Style.css.titleHeight,backgroundColor:Style.color.white,paddingLeft:20,paddingRight:20,marginTop:5,},
    listNextView:{flexDirection:'row',height:Style.css.titleHeight,backgroundColor:'#d9d9d9',paddingLeft:20,paddingRight:20,marginTop:5,},
    kpiTitle:{color:Style.color.black,fontSize:Style.fontSize.normal},
})